<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${title != null ? title + ' - 用户管理系统' : '用户管理系统'}">用户管理系统</title>
    
    <!-- Bootstrap CSS -->
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    
    <!-- 自定义样式 -->
    <style>
        .navbar-brand {
            font-weight: bold;
        }
        .card {
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        }
        .table th {
            background-color: #f8f9fa;
            font-weight: 600;
        }
        .btn-sm {
            padding: 0.25rem 0.5rem;
            font-size: 0.875rem;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" th:href="@{/}">用户管理系统</a>
            <div class="navbar-nav">
                <a class="nav-link" th:href="@{/user/list}">用户列表</a>
                <a class="nav-link" th:href="@{/user/add}">添加用户</a>
            </div>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <div class="container mt-4">
        <!-- 页面标题 -->
        <div class="row mb-3">
            <div class="col">
                <h2 th:text="${pageTitle != null ? pageTitle : '用户管理'}">用户管理</h2>
            </div>
        </div>

        <!-- 页面内容 -->
        <div class="row">
            <div class="col">
                <div th:fragment="content">
                    <!-- 这里会被具体页面的内容替换 -->
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script th:src="@{/js/bootstrap.bundle.min.js}"></script>
    
    <!-- 自定义脚本 -->
    <script th:fragment="scripts">
        // 页面特定的脚本可以在这里添加
    </script>
</body>
</html>
